<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>气象数据监控大屏</title>
    <style>
        /* 设置根元素的字体大小 */
        html {
            /*font-size: 62.5%; !* 旧的，不需要的 *!*/
            font-size: clamp(12px, 2vw, 2vw); /*新的。需要以这个为标准*/
        }

        /* 页面基础样式 */
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(45deg, #141e30, #243b55);
            color: #fff;
            overflow: hidden;
        }

        .title {
            text-align: center;
            color: #00bcd4;
            line-height: 1rem;
            font-weight: bold;
            font-size: 1rem;
            padding-top: .5rem;
            padding-bottom: .3rem;
        }

        .container {
            padding: 1rem 1rem; /* 20px / 10 */
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: calc(100% - 2rem);
            gap: .5rem; /* 60px / 10 */
            height: calc(100vh - 4rem); /* (100vh - 200px) / 10 */
            overflow: hidden;
        }


        .container .left, .container .center, .container .right {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-content: center;
            gap: .5rem;
        }

        .container .left {
            flex: 10;
        }

        .container .center {
            flex: 5;
        }

        .container .right {
            flex: 7;
        }

        .container .center .chart-container {
            flex: 7;
        }

        /*.container .center .chart-container:nth-child(3) {*/
        /*    flex: 13;*/
        /*}*/

        .container .left .top {
            flex: 1;
            display: flex;
            flex-direction: row;
            gap: .5rem;
        }

        .container .left .top .left {
            flex: 3;
            height: 100%;
        }

        .container .left .top .right {
            flex: 2;
            height: calc(100% - .6rem);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 0;
            font-size: 0.4rem;
            padding: 0.3rem;
            border-radius: 0.5rem; /* 15px / 10 */
            box-shadow: 0 0 1rem rgba(0, 255, 255, 0.2); /* 30px / 10 */
        }

        .container .left .top .right div:nth-child(1) {
            font-size: 0.6rem;
        }

        .container .left .chart-container {
            flex: 1;
        }


        .container .right .chart-container {
            flex: 1;
        }

        .container .right .chart-container#days_weather_chart {
            display: flex;
            flex-direction: column;
            padding: .3rem;
            width: calc(100% - .6rem);
        }

        .container .right .chart-container#days_weather_chart .days_weather_title {
            color: #00bcd4;
            font-weight: bold;
            font-size: .7rem;
            text-align: center;
            margin-bottom: .3rem;
        }

        .container .right .chart-container#days_weather_chart .days_weather_view {
            flex: 1;
            display: flex;
            flex-direction: row;
            background-image: linear-gradient(0, #a6d4f6, #50b2fb);
        }

        .container .right .chart-container#days_weather_chart .days_weather_view .item {
            flex: 1;
            padding: .1rem;
            display: flex;
            flex-direction: column;
            background-image: linear-gradient(0, #8cc8ff, #1478e6);
            border: 1px solid #FFFFFF;
            font-size: .4rem;
            justify-content: space-between;
            align-content: center;
            text-align: center;
            cursor: pointer;
        }

        .chart-container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border-radius: 0.5rem; /* 15px / 10 */
            box-shadow: 0 0 1rem rgba(0, 255, 255, 0.2); /* 30px / 10 */
        }
    </style>
</head>
<body>
<div class="title">六安市林业气象大数据监控与决策大屏</div>

<div class="container">
    <div class="left">
        <div class="top">
            <div class="left">
                <div id="real_time_chart" class="chart-container"></div>
            </div>
            <div id="real_time_info" class="right">
            </div>
        </div>
        <div id="temperature_chart" class="chart-container"></div>
        <div id="humidity_chart" class="chart-container"></div>
        <div id="wind_level_chart" class="chart-container"></div>
        <div id="precipitation_chart" class="chart-container"></div>
    </div>
    <div class="center">
        <div id="fire_warning_chart" class="chart-container"></div>
        <div id="flood_warning_chart" class="chart-container"></div>
        <!--        <div id="map_chart" class="chart-container"></div>-->
        <div id="cold_warning_chart" class="chart-container"></div>
        <div id="wind_warning_chart" class="chart-container"></div>
    </div>
    <div class="right">
        <div id="days_temperature_chart" class="chart-container"></div>
        <div id="days_weather_chart" class="chart-container"></div>
        <div id="days_wind_level_chart" class="chart-container"></div>
        <!--        <div id="days_precipitation_chart" class="chart-container"></div>-->
    </div>
    <!--    <div id="temperature_chart" class="chart-container"></div>-->
    <!--    <div id="humidity_chart" class="chart-container"></div>-->
    <!--    <div id="wind_direction_chart" class="chart-container"></div>-->
    <!--    <div id="wind_level_chart" class="chart-container"></div>-->
    <!--    <div id="precipitation_chart" class="chart-container"></div>-->
    <!--    <div id="air_quality_chart" class="chart-container"></div>-->
</div>
</body>
<script src="static/echarts.min.js"></script>
<script src="static/echarts-gl.min.js"></script>

<script type="text/javascript">
    let charts = [];

    function addResizeListener() {
        window.addEventListener('resize', () => {
            charts.forEach(chart => chart.resize());
        });
    }

    // 获取并渲染温度图表
    function renderTemperatureChart(data) {
        const chart = echarts.init(document.getElementById('temperature_chart'));
        if (!charts.includes(chart)) {
            charts.push(chart);
        }
        const options = {
            title: {
                text: '24小时温度变化',
                left: 'center',
                top: "5rem",
                textStyle: {
                    color: '#00bcd4',
                    fontWeight: 'bold',
                    fontSize: '.7rem'
                },
                subtextStyle: {
                    color: '#b0e0e6',
                }
            },
            grid: {
                left: '20rem',
                right: '20rem',
                top: '60rem',
                bottom: '5rem',
                containLabel: true  // 确保 grid 包含坐标轴标签和标题
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#212121',
                borderColor: '#00bcd4',
                borderWidth: '0.1rem',
                textStyle: {
                    color: '#fff'
                }
            },
            xAxis: {
                type: 'category',
                data: data.date,
                axisLine: {
                    lineStyle: {
                        color: '#00bcd4'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    formatter: function (value, index) {
                        var date = new Date(value);
                        var year = date.getFullYear();// 获取年份
                        var month = ('0' + (date.getMonth() + 1)).slice(-2);// 获取月份并确保两位数格式
                        var day = ('' + date.getDate()).slice(-2);// 获取日期并确保两位数格式
                        var hours = date.getHours();// 获取小时并确保两位数格式
                        var minutes = ('0' + date.getMinutes()).slice(-2);// 获取分钟并确保两位数格式
                        var seconds = ('0' + date.getSeconds()).slice(-2);// 获取秒并确保两位数格式
                        return `${hours}点\n${day}号`;  // 格式化为 YYYY-MM-DD;  // 格式化为 YYYY-MM-DD
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: '温度 (°C)',
                nameTextStyle: {
                    color: '#fff',
                },
                axisLine: {
                    lineStyle: {
                        color: '#00bcd4'
                    }
                },
                axisLabel: {
                    color: '#fff'
                }
            },
            series: [
                {
                    data: data.temp,
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: '#1f77b4'
                    },
                    lineStyle: {
                        color: '#1f77b4'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: '.3rem',
                        formatter: function (params) {
                            return `${params.value}℃`;  // 在温度值后面加上℃
                        }
                    },
                },
            ]
        };
        chart.setOption(options);
    }

    // 获取并渲染风力风向图表
    function renderWindLevelChart(data) {
        const chart = echarts.init(document.getElementById('wind_level_chart'));
        if (!charts.includes(chart)) {
            charts.push(chart);
        }

        const options = {
            title: {
                text: '24小时风力与风向变化',
                left: 'center',
                top: "5rem",
                textStyle: {
                    color: '#00bcd4',
                    fontWeight: 'bold',
                    fontSize: '.7rem'
                },
                subtextStyle: {
                    color: '#b0e0e6',
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'  // 使用十字准线
                },
                backgroundColor: '#212121',
                borderColor: '#00bcd4',
                borderWidth: '0.1rem',
                textStyle: {
                    color: '#fff'
                },
                formatter: function (params) {
                    let tooltipHtml = '';
                    params.forEach(param => {
                        if (param.seriesName === '风力') {
                            tooltipHtml += `<div style="margin-bottom: 8px;">
                            <span style="color:#1f77b4;">风力: ${param.value} 级</span>
                        </div>`;
                        } else if (param.seriesName === '风向') {
                            tooltipHtml += `<div style="margin-bottom: 8px;">
                            <span style="color:#ff7f0e;">风向: ${param.name}</span>
                        </div>`;
                        }
                    });
                    return tooltipHtml;
                }
            },
            legend: {
                data: ['风力', '风向'],
                right: '10%',
                textStyle: {
                    color: '#fff',  // 选中时文字颜色为白色
                },
                inactiveTextStyle: {
                    color: '#888',  // 未选中时文字颜色为灰色
                }
            },
            grid: {
                left: '20rem',
                right: '20rem',
                top: '60rem',
                bottom: '15rem',
                containLabel: true  // 确保 grid 包含坐标轴标签和标题
            },
            xAxis: {
                type: 'category',
                data: data.date,
                axisLine: {
                    lineStyle: {
                        color: '#00bcd4'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    formatter: function (value, index) {
                        var date = new Date(value);
                        var year = date.getFullYear();
                        var month = ('0' + (date.getMonth() + 1)).slice(-2);
                        var day = ('' + date.getDate()).slice(-2);
                        var hours = ('' + date.getHours()).slice(-2);
                        var minutes = ('0' + date.getMinutes()).slice(-2);
                        var seconds = ('0' + date.getSeconds()).slice(-2);
                        return `${hours}点\n${day}号`;
                    }
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '风力 (级)',
                    nameTextStyle: {
                        color: '#1f77b4',
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1f77b4'
                        }
                    },
                    axisLabel: {
                        color: '#1f77b4'
                    }
                },
                {
                    type: 'category',
                    name: '风向',
                    nameLocation: 'end',  // 将风向名称放在 Y 轴的末端
                    nameGap: 20,          // 风向名称与 Y 轴的距离
                    nameTextStyle: {
                        color: '#ff7f0e',
                    },
                    axisLine: {
                        show: false  // 不显示风向的 Y 轴线
                    },
                    axisTick: {
                        show: false  // 不显示风向的刻度
                    },
                    axisLabel: {
                        show: false  // 不显示风向的标签
                    },
                    data: data.direction,  // 风向数据
                    inverse: true  // 反转风向 Y 轴，使其与风力 Y 轴对齐
                }
            ],
            series: [
                {
                    name: '风力',
                    type: 'line',
                    smooth: true,
                    yAxisIndex: 0,  // 使用左侧 Y 轴
                    data: data.scale,
                    itemStyle: {
                        color: '#1f77b4'
                    },
                    lineStyle: {
                        color: '#1f77b4'
                    }
                },
                {
                    name: '风向',
                    type: 'line',
                    yAxisIndex: 1,  // 使用右侧 Y 轴
                    data: data.direction.map((dir, index) => ({
                        value: index,  // 使用索引作为 Y 轴值
                        name: dir       // 保存风向名称用于 tooltip
                    })),
                    symbol: 'none',  // 不显示数据点
                    lineStyle: {
                        color: 'rgba(0,0,0,0)'  // 隐藏风向的线条
                    },
                    itemStyle: {
                        color: '#ff7f0e'
                    },
                    z: -1  // 将风向系列置于底层
                }
            ]
        };
        chart.setOption(options);
    }

    // 获取并渲染温度图表
    function renderPrecipitationChart(data) {
        const chart = echarts.init(document.getElementById('precipitation_chart'));
        if (!charts.includes(chart)) {
            charts.push(chart);
        }
        const options = {
            title: {
                text: '24小时降雨量变化',
                left: 'center',
                top: "5rem",
                textStyle: {
                    color: '#00bcd4',
                    fontWeight: 'bold',
                    fontSize: '.7rem'
                },
                subtextStyle: {
                    color: '#b0e0e6',
                }
            },
            grid: {
                left: '20rem',
                right: '20rem',
                top: '60rem',
                bottom: '5rem',
                containLabel: true  // 确保 grid 包含坐标轴标签和标题
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#212121',
                borderColor: '#00bcd4',
                borderWidth: '0.1rem',
                textStyle: {
                    color: '#fff'
                }
            },
            xAxis: {
                type: 'category',
                data: data.date,
                axisLine: {
                    lineStyle: {
                        color: '#00bcd4'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    formatter: function (value, index) {
                        var date = new Date(value);
                        var year = date.getFullYear();
                        var month = ('0' + (date.getMonth() + 1)).slice(-2);
                        var day = ('' + date.getDate()).slice(-2);
                        var hours = ('' + date.getHours()).slice(-2);
                        var minutes = ('0' + date.getMinutes()).slice(-2);
                        var seconds = ('0' + date.getSeconds()).slice(-2);
                        return `${hours}点\n${day}号`;
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: '降水量  (mm)',
                nameTextStyle: {
                    color: '#fff',
                },
                axisLine: {
                    lineStyle: {
                        color: '#00bcd4'
                    }
                },
                axisLabel: {
                    color: '#fff'
                }
            },
            series: [
                {
                    data: data.precipitation,
                    type: 'bar',
                    smooth: true,
                    itemStyle: {
                        color: '#1f77b4'
                    },
                    lineStyle: {
                        color: '#1f77b4'
                    }
                },
            ]
        };
        chart.setOption(options);
    }

    // 获取并渲染温度图表
    function renderHumidityChart(data) {
        const chart = echarts.init(document.getElementById('humidity_chart'));
        if (!charts.includes(chart)) {
            charts.push(chart);
        }
        const options = {
            title: {
                text: '24小时湿度变化',
                left: 'center',
                top: "5rem",
                textStyle: {
                    color: '#00bcd4',
                    fontWeight: 'bold',
                    fontSize: '.7rem'
                },
                subtextStyle: {
                    color: '#b0e0e6',
                }
            },
            grid: {
                left: '20rem',
                right: '20rem',
                top: '60rem',
                bottom: '5rem',
                containLabel: true  // 确保 grid 包含坐标轴标签和标题
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#212121',
                borderColor: '#00bcd4',
                borderWidth: '0.1rem',
                textStyle: {
                    color: '#fff'
                }
            },
            xAxis: {
                type: 'category',
                data: data.date,
                axisLine: {
                    lineStyle: {
                        color: '#00bcd4'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    formatter: function (value, index) {
                        var date = new Date(value);
                        var year = date.getFullYear();// 获取年份
                        var month = ('0' + (date.getMonth() + 1)).slice(-2);
                        var day = ('' + date.getDate()).slice(-2);
                        var hours = ('' + date.getHours()).slice(-2);
                        var minutes = ('0' + date.getMinutes()).slice(-2);
                        var seconds = ('0' + date.getSeconds()).slice(-2);
                        return `${hours}点\n${day}号`;
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: '湿度 (%)',
                nameTextStyle: {
                    color: '#fff',
                },
                axisLine: {
                    lineStyle: {
                        color: '#00bcd4'
                    }
                },
                axisLabel: {
                    color: '#fff'
                }
            },
            series: [
                {
                    data: data.humidity,
                    type: 'bar',
                    smooth: true,
                    itemStyle: {
                        color: '#1f77b4'
                    },
                    lineStyle: {
                        color: '#1f77b4'
                    }
                }
            ]
        };
        chart.setOption(options);
    }

    // 一周温度变化
    function renderDaysTemperatureChart(data) {
        const chart = echarts.init(document.getElementById('days_temperature_chart'));
        if (!charts.includes(chart)) {
            charts.push(chart);
        }
        const options = {
            title: {
                text: '7天温度变化',
                left: 'center',
                top: "5rem",
                textStyle: {
                    color: '#00bcd4',
                    fontWeight: 'bold',
                    fontSize: '.7rem'
                },
            },
            grid: {
                left: '20rem',
                right: '20rem',
                top: '60rem',
                bottom: '5rem',
                containLabel: true  // 确保 grid 包含坐标轴标签和标题
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'  // 使用十字准线
                },
                backgroundColor: '#212121',
                borderColor: '#00bcd4',
                borderWidth: '0.1rem',
                textStyle: {
                    color: '#fff'
                },
                formatter: function (params) {
                    let tooltipHtml = `<div style="padding: 8px;">`;
                    const date = params[0].name;
                    // 找到对应的索引
                    const index = data.day.indexOf(date);
                    if (index !== -1) {
                        tooltipHtml += `<div style="margin-bottom: 8px; font-size: 16px; color: #00bcd4;">
                        <strong>${date}</strong>
                    </div>`;
                        // 构建温度信息
                        tooltipHtml += `<div style="margin-bottom: 8px;">
                        <span style="color:#ff7f0e;">最高温度: ${data.max_temp[index]} °C</span><br>
                        <span style="color:#1f77b4;">最低温度: ${data.min_temp[index]} °C</span>
                    </div>`;
                    }

                    tooltipHtml += '</div>';
                    return tooltipHtml;
                }
            },
            xAxis: {
                type: 'category',
                data: data.day,
                axisLine: {
                    lineStyle: {
                        color: '#00bcd4'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    formatter: function (value, index) {
                        const date = new Date(value);
                        return `${date.getMonth() + 1}月${date.getDate()}号`;
                    }
                }
            },
            legend: {
                data: ['最高温度', '最低温度'],
                right: '10%',
                textStyle: {
                    color: '#fff',  // 选中时文字颜色为白色
                },
                inactiveTextStyle: {
                    color: '#888',  // 未选中时文字颜色为灰色
                }
            },
            yAxis: {
                type: 'value',
                name: '温度 (°C)',
                nameTextStyle: {
                    color: '#fff'
                },
                axisLine: {
                    lineStyle: {
                        color: '#00bcd4'
                    }
                },
                axisLabel: {
                    color: '#fff'
                },
                min: function (value) {
                    return Math.floor(value.min) - 1;  // Y 轴最小值稍微低于最低温度
                },
                max: function (value) {
                    return Math.ceil(value.max) + 1;   // Y 轴最大值稍微高于最高温度
                }
            },
            series: [
                {
                    name: '最高温度',
                    type: 'line',
                    data: data.max_temp,  // 最高温度数据
                    itemStyle: {
                        color: '#ff7f0e'  // 橙色表示最高温度
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function (params) {
                            return `${params.value}℃`;  // 在温度值后面加上℃
                        }
                    },
                    smooth: true  // 平滑曲线
                },
                {
                    name: '最低温度',
                    type: 'line',
                    data: data.min_temp,  // 最低温度数据
                    itemStyle: {
                        color: '#1f77b4'  // 蓝色表示最低温度
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function (params) {
                            return `${params.value}℃`;  // 在温度值后面加上℃
                        }
                    },
                    smooth: true  // 平滑曲线
                }
            ]
        };
        chart.setOption(options);
    }

    // 一周天气
    function renderDaysWeatherChart(data) {
        let html = '<div class="days_weather_title">7天天气状况</div><div class="days_weather_view">'
        for (let i in data.day) {
            html += `
            <div class="item">
                <div>${parseInt(data.day[i].split('-')[1])}月${parseInt(data.day[i].split('-')[2])}号</div>
                <div>${data.weather[i]}</div>
                <div>${data.max_temp[i]}℃/${data.min_temp[i]}℃</div>
                <div>${data.wind_scale[i]}级</div>
                <div>${data.direction1[i]}</div>
            </div>
            `
        }
        html += '</div>'
        document.getElementById('days_weather_chart').innerHTML = html

    }

    // 一周风力风向
    function renderDaysWindLevelChart(data) {
        const chart = echarts.init(document.getElementById('days_wind_level_chart'));
        if (!charts.includes(chart)) {
            charts.push(chart);
        }

        const options = {
            title: {
                text: '7天风力等级变化',
                left: 'center',
                top: "5rem",
                textStyle: {
                    color: '#00bcd4',
                    fontWeight: 'bold',
                    fontSize: '.7rem'
                },
                subtextStyle: {
                    color: '#b0e0e6',
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'  // 使用十字准线
                },
                backgroundColor: '#212121',
                borderColor: '#00bcd4',
                borderWidth: '0.1rem',
                textStyle: {
                    color: '#fff'
                },
                formatter: function (params) {
                    let tooltipHtml = '';
                    params.forEach(param => {
                        if (param.seriesName === '风力等级') {
                            tooltipHtml += `<div style="margin-bottom: 8px;">
                            <span style="color:#1f77b4;">风力等级: ${param.value} 级</span>
                        </div>`;
                        } else if (param.seriesName === '主要风向') {
                            tooltipHtml += `<div style="margin-bottom: 8px;">
                            <span style="color:#ff7f0e;">主要风向: ${param.name}</span>
                        </div>`;
                        } else if (param.seriesName === '次要风向') {
                            tooltipHtml += `<div style="margin-bottom: 8px;">
                            <span style="color:#d62728;">次要风向: ${param.name}</span>
                        </div>`;
                        }
                    });
                    return tooltipHtml;
                }
            },
            legend: {
                data: ['风力等级', '主要风向', '次要风向'],
                right: '10%',
                show: false,
                textStyle: {
                    color: '#fff',  // 选中时文字颜色为白色
                },
                inactiveTextStyle: {
                    color: '#888',  // 未选中时文字颜色为灰色
                }
            },
            grid: {
                left: '20rem',
                right: '20rem',
                top: '60rem',
                bottom: '15rem',
                containLabel: true  // 确保 grid 包含坐标轴标签和标题
            },
            xAxis: {
                type: 'category',
                data: data.day,
                axisLine: {
                    lineStyle: {
                        color: '#00bcd4'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    formatter: function (value, index) {
                        const date = new Date(value);
                        return `${date.getMonth() + 1}月${date.getDate()}号`;
                    }
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '风力等级 (级)',
                    nameTextStyle: {
                        color: '#1f77b4',
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1f77b4'
                        }
                    },
                    axisLabel: {
                        color: '#1f77b4'
                    },
                    min: 0,  // Y 轴最小值从0开始
                    max: function (value) {
                        return Math.ceil(value.max) + 1;  // Y 轴最大值稍微高于最高风力等级
                    }
                },
                {
                    type: 'category',
                    name: '风向',
                    nameLocation: 'end',  // 将风向名称放在 Y 轴的末端
                    nameGap: 20,          // 风向名称与 Y 轴的距离
                    nameTextStyle: {
                        color: '#ff7f0e',
                    },
                    axisLine: {
                        show: false  // 不显示风向的 Y 轴线
                    },
                    axisTick: {
                        show: false  // 不显示风向的刻度
                    },
                    axisLabel: {
                        show: false  // 不显示风向的标签
                    },
                    data: data.direction1,  // 主要风向数据
                    inverse: true  // 反转风向 Y 轴，使其与风力 Y 轴对齐
                }
            ],
            series: [
                {
                    name: '风力等级',
                    type: 'line',
                    smooth: true,
                    yAxisIndex: 0,  // 使用左侧 Y 轴
                    data: data.wind_scale,
                    itemStyle: {
                        color: '#1f77b4'
                    },
                    lineStyle: {
                        color: '#1f77b4'
                    }
                },
                {
                    name: '主要风向',
                    type: 'line',
                    yAxisIndex: 1,  // 使用右侧 Y 轴
                    data: data.direction1.map((dir, index) => ({
                        value: index,  // 使用索引作为 Y 轴值
                        name: dir       // 保存风向名称用于 tooltip
                    })),
                    symbol: 'none',  // 不显示数据点
                    lineStyle: {
                        color: 'rgba(0,0,0,0)'  // 隐藏风向的线条
                    },
                    itemStyle: {
                        color: '#ff7f0e'
                    },
                    z: -1  // 将风向系列置于底层
                },
                {
                    name: '次要风向',
                    type: 'line',
                    yAxisIndex: 1,  // 使用右侧 Y 轴
                    data: data.direction2.map((dir, index) => ({
                        value: index,  // 使用索引作为 Y 轴值
                        name: dir       // 保存风向名称用于 tooltip
                    })),
                    symbol: 'none',  // 不显示数据点
                    lineStyle: {
                        color: 'rgba(0,0,0,0)'  // 隐藏风向的线条
                    },
                    itemStyle: {
                        color: '#d62728'
                    },
                    z: -2  // 将次要风向系列置于更底层
                }
            ]
        };

        chart.setOption(options);
    }

    function renderRealTimeInfoChart(data) {
        // 创建 Date 对象
        const date = new Date(data.date);
        // 获取小时（24 小时制）
        let hours = date.getHours();
        // 判断是上午还是下午
        const period = hours >= 12 ? '下午' : '上午';
        // 将 24 小时制转换为 12 小时制
        hours = hours % 12 || 12; // 如果是 0 点，则显示为 12

        document.getElementById('real_time_info').innerHTML = `
        <div>${date.getMonth() + 1}月${date.getDate()}号 ${period}${hours}点</div>
        <div>温度:${data.temp}°C</div>
        <div>风力：${data.wind_scale}级</div>
        <div>风向：${data.direction}</div>
        <div>相对湿度（%）:${data.humidity}%</div>
        <div>降水量（mm）:${data.precipitation}mm</div>
        <div>空气质量:${data.quality}</div>
        `
    }

    function renderRealTimeChart(data) {
        const chart = echarts.init(document.getElementById('real_time_chart'));

        if (!charts.includes(chart)) {
            charts.push(chart);
        }

        const options = {
            title: {
                text: '当前温度',
                left: 'center',
                top: "5rem",
                textStyle: {
                    color: '#00bcd4',
                    fontWeight: 'bold',
                    fontSize: '.7rem'
                },
                subtextStyle: {
                    color: '#b0e0e6',
                }
            },
            // grid: {
            //     left: '20rem',
            //     right: '20rem',
            //     top: '60rem',
            //     bottom: '15rem',
            //     containLabel: true  // 确保 grid 包含坐标轴标签和标题
            // },
            tooltip: {
                backgroundColor: '#212121',
                borderColor: '#00bcd4',
                borderWidth: '0.1rem',
                textStyle: {
                    color: '#fff'
                },
                formatter: function (params) {
                    if (Number.isInteger(params.value)) {
                        return "当前温度：" + params.value + "℃"; // 如果是整数，直接返回其字符串形式
                    } else {
                        return "当前温度：" + parseFloat(params.value.toFixed(1)) + "℃"; // 否则，保留一位小数并转换回数字
                    }
                }
            },
            series: [
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    center: ['50%', '75%'],
                    radius: '90%',
                    min: -50,
                    max: 50,
                    splitNumber: 4,
                    axisLine: {
                        lineStyle: {
                            width: 6,
                            color: [
                                [0.25, '#58D9F9'],
                                [0.5, '#7CFFB2'],
                                [0.75, '#FDDD60'],
                                [1, '#FF6E76']
                            ]
                        }
                    },
                    pointer: {
                        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                        length: '12%',
                        width: 20,
                        offsetCenter: [0, '-60%'],
                        itemStyle: {
                            color: 'auto'
                        }
                    },
                    axisTick: {
                        length: 12,
                        lineStyle: {
                            color: 'auto',
                            width: 2
                        }
                    },
                    splitLine: {
                        length: 20,
                        lineStyle: {
                            color: 'auto',
                            width: 5
                        }
                    },
                    axisLabel: {
                        color: '#FFFFFF',
                        fontSize: 20,
                        distance: -60,
                        rotate: 'tangential',
                        formatter: function (value) {
                            if (Number.isInteger(value)) {
                                return value + "℃"; // 如果是整数，直接返回其字符串形式
                            } else {
                                return parseFloat(value.toFixed(1)) + "℃"; // 否则，保留一位小数并转换回数字
                            }
                        }
                    },
                    title: {
                        offsetCenter: [0, '-10%'],
                        fontSize: 20
                    },
                    detail: {
                        fontSize: 30,
                        offsetCenter: [0, '-35%'],
                        valueAnimation: true,
                        formatter: function (value) {
                            if (Number.isInteger(value)) {
                                return value + "℃"; // 如果是整数，直接返回其字符串形式
                            } else {
                                return parseFloat(value.toFixed(1)) + "℃"; // 否则，保留一位小数并转换回数字
                            }
                        },
                        color: 'inherit'
                    },

                    data: [
                        {
                            value: data.temp,
                            // name: "当前温度",
                        }
                    ]
                }
            ]
        };

        chart.setOption(options);
    }

    function renderFireWarningChart(data) {
        const chart = echarts.init(document.getElementById('fire_warning_chart'));

        if (!charts.includes(chart)) {
            charts.push(chart);
        }

        let initialValue = 8;   //无风险
        if (data.fire_warning === "低风险") {
            initialValue = 30;
        } else if (data.fire_warning === "中风险") {
            initialValue = 70;
        } else if (data.fire_warning === "高风险") {
            initialValue = 90;
        }
        const options = {
            title: {
                text: '火灾风险等级',
                left: 'center',
                top: "5rem",
                textStyle: {
                    color: '#00bcd4',
                    fontWeight: 'bold',
                    fontSize: '.7rem'
                },
                subtextStyle: {
                    color: '#b0e0e6',
                }
            },
            tooltip: {
                backgroundColor: '#212121',
                borderColor: '#00bcd4',
                borderWidth: '0.1rem',
                textStyle: {
                    color: '#fff'
                },
                formatter: function (params) {
                    return "火灾风险等级：" + data.fire_warning
                }
            },
            series: [
                {
                    name: '火灾风险',
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    splitNumber: 3,
                    radius: '90%',
                    center: ['50%', '70%'],
                    axisLine: {
                        lineStyle: {
                            width: 15,
                            color: [
                                [0.20, '#00bcd4'],  // 无风险 (0-20)
                                [0.50, '#5cb85c'],  // 低风险 (20-50)
                                [0.80, '#f0ad4e'],  // 中风险 (50-80)
                                [1, '#d9534f']     // 高风险 (80-100)
                            ]
                        }
                    },
                    pointer: {
                        length: '80%',
                        width: 8,
                        color: 'auto'
                    },
                    axisTick: {
                        length: 15,
                        lineStyle: {
                            color: 'auto',
                            width: 2
                        }
                    },
                    splitLine: {
                        length: 25,
                        lineStyle: {
                            color: 'auto',
                            width: 4
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 16,
                        distance: -40,
                        formatter: function (value) {
                            if (value <= 20) return '无风险';
                            // if (value <= 50) return '低风险';
                            // if (value <= 80) return '中风险';
                            if (value <= 50) return '';
                            if (value <= 80) return '';
                            return '高风险';
                        }
                    },
                    title: {
                        offsetCenter: [0, '-40%'],
                        fontSize: 24,
                        color: '#fff',
                        text: '火灾风险等级'
                    },
                    detail: {
                        fontSize: 30,
                        offsetCenter: [0, '0%'],
                        valueAnimation: true,
                        formatter: function (value) {
                            if (value <= 20) return '无';
                            if (value <= 50) return '低';
                            if (value <= 80) return '中';
                            return '高';
                        },
                        color: 'inherit'
                    },
                    data: [
                        {
                            value: initialValue,
                            // name: '洪水风险等级'
                        }
                    ]
                }
            ],
            graphic: [
                {
                    type: 'text',
                    left: 'center',
                    top: 'bottom',
                    style: {
                        text: `决策建议: ${data.fire_warning_decision}`,
                        fontSize: 14,
                        fontWeight: 'bold',
                        fill: 'white', // 文字颜色
                        textAlign: 'center',
                        lineHeight: 20, // 行高
                        padding: [5, 0],
                    }
                }
            ]
        };

        chart.setOption(options);
    }

    function renderFloodWarningChart(data) {
        const chart = echarts.init(document.getElementById('flood_warning_chart'));

        if (!charts.includes(chart)) {
            charts.push(chart);
        }

        let initialValue = 8;   //无风险
        if (data.flood_warning === "低风险") {
            initialValue = 30;
        } else if (data.flood_warning === "中风险") {
            initialValue = 70;
        } else if (data.flood_warning === "高风险") {
            initialValue = 90;
        }
        const options = {
            title: {
                text: '洪水风险等级',
                left: 'center',
                top: "5rem",
                textStyle: {
                    color: '#00bcd4',
                    fontWeight: 'bold',
                    fontSize: '.7rem'
                },
                subtextStyle: {
                    color: '#b0e0e6',
                }
            },
            tooltip: {
                backgroundColor: '#212121',
                borderColor: '#00bcd4',
                borderWidth: '0.1rem',
                textStyle: {
                    color: '#fff'
                },
                formatter: function (params) {
                    return "洪水风险等级：" + data.flood_warning
                }
            },
            series: [
                {
                    name: '洪水风险',
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    splitNumber: 3, // 分为三个区域：低、中、高风险
                    radius: '90%',
                    center: ['50%', '70%'],
                    axisLine: {
                        lineStyle: {
                            width: 15,
                            color: [
                                [0.20, '#00bcd4'],  // 无风险 (0-20)
                                [0.50, '#5cb85c'],  // 低风险 (20-50)
                                [0.80, '#f0ad4e'],  // 中风险 (50-80)
                                [1, '#d9534f']     // 高风险 (80-100)
                            ]
                        }
                    },
                    pointer: {
                        length: '80%',
                        width: 8,
                        color: 'auto'
                    },
                    axisTick: {
                        length: 15,
                        lineStyle: {
                            color: 'auto',
                            width: 2
                        }
                    },
                    splitLine: {
                        length: 25,
                        lineStyle: {
                            color: 'auto',
                            width: 4
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 16,
                        distance: -40,
                        formatter: function (value) {
                            if (value <= 20) return '无风险';
                            // if (value <= 50) return '低风险';
                            // if (value <= 80) return '中风险';
                            if (value <= 50) return '';
                            if (value <= 80) return '';
                            return '高风险';
                        }
                    },
                    title: {
                        offsetCenter: [0, '-40%'],
                        fontSize: 24,
                        color: '#fff',
                        text: '洪水风险等级'
                    },
                    detail: {
                        fontSize: 30,
                        offsetCenter: [0, '0%'],
                        valueAnimation: true,
                        formatter: function (value) {
                            if (value <= 20) return '无';
                            if (value <= 50) return '低';
                            if (value <= 80) return '中';
                            return '高';
                        },
                        color: 'inherit'
                    },
                    data: [
                        {
                            value: initialValue,
                            // name: '洪水风险等级'
                        }
                    ]
                }
            ],
            graphic: [
                {
                    type: 'text',
                    left: 'center',
                    top: 'bottom',
                    style: {
                        text: `决策建议: ${data.flood_warning_decision}`,
                        fontSize: 14,
                        fontWeight: 'bold',
                        fill: 'white', // 文字颜色
                        textAlign: 'center',
                        lineHeight: 20, // 行高
                        padding: [5, 0],
                    }
                }
            ]
        };

        chart.setOption(options);
    }

    function renderColdWarningChart(data) {
        const chart = echarts.init(document.getElementById('cold_warning_chart'));

        if (!charts.includes(chart)) {
            charts.push(chart);
        }
        let initialValue = 8;   //无风险
        if (data.cold_warning === "低风险") {
            initialValue = 30;
        } else if (data.cold_warning === "中风险") {
            initialValue = 70;
        } else if (data.cold_warning === "高风险") {
            initialValue = 90;
        }
        const options = {
            title: {
                text: '严寒风险等级',
                left: 'center',
                top: "5rem",
                textStyle: {
                    color: '#00bcd4',
                    fontWeight: 'bold',
                    fontSize: '.7rem'
                },
                subtextStyle: {
                    color: '#b0e0e6',
                }
            },
            tooltip: {
                backgroundColor: '#212121',
                borderColor: '#00bcd4',
                borderWidth: '0.1rem',
                textStyle: {
                    color: '#fff'
                },
                formatter: function (params) {
                    return "严寒风险等级：" + data.cold_warning
                }
            },
            series: [
                {
                    name: '严寒风险',
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    splitNumber: 3, // 分为三个区域：低、中、高风险
                    radius: '90%',
                    center: ['50%', '70%'],
                    axisLine: {
                        lineStyle: {
                            width: 15,
                            color: [
                                [0.20, '#00bcd4'],  // 无风险 (0-20)
                                [0.50, '#5cb85c'],  // 低风险 (20-50)
                                [0.80, '#f0ad4e'],  // 中风险 (50-80)
                                [1, '#d9534f']     // 高风险 (80-100)
                            ]
                        }
                    },
                    pointer: {
                        length: '80%',
                        width: 8,
                        color: 'auto'
                    },
                    axisTick: {
                        length: 15,
                        lineStyle: {
                            color: 'auto',
                            width: 2
                        }
                    },
                    splitLine: {
                        length: 25,
                        lineStyle: {
                            color: 'auto',
                            width: 4
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 16,
                        distance: -40,
                        formatter: function (value) {
                            if (value <= 20) return '无风险';
                            // if (value <= 50) return '低风险';
                            // if (value <= 80) return '中风险';
                            if (value <= 50) return '';
                            if (value <= 80) return '';
                            return '高风险';
                        }
                    },
                    title: {
                        offsetCenter: [0, '-40%'],
                        fontSize: 24,
                        color: '#fff',
                        text: '严寒风险等级'
                    },
                    detail: {
                        fontSize: 30,
                        offsetCenter: [0, '0%'],
                        valueAnimation: true,
                        formatter: function (value) {
                            if (value <= 20) return '无';
                            if (value <= 50) return '低';
                            if (value <= 80) return '中';
                            return '高';
                        },
                        color: 'inherit'
                    },
                    data: [
                        {
                            value: initialValue,  // 根据火灾风险设置初始值
                            // name: '大风风险等级'
                        }
                    ]
                }
            ],
            // 添加图形组件，用于显示全局天气信息
            graphic: [
                {
                    type: 'text',
                    left: 'center',
                    top: 'bottom',
                    style: {
                        text: `决策建议: ${data.cold_warning_decision}`,
                        fontSize: 14,
                        fontWeight: 'bold',
                        fill: 'white', // 文字颜色
                        textAlign: 'center',
                        lineHeight: 20, // 行高
                        padding: [5, 0],
                    }
                }
            ]
        };

        chart.setOption(options);
    }

    function renderWindWarningChart(data) {
        const chart = echarts.init(document.getElementById('wind_warning_chart'));
        if (!charts.includes(chart)) {
            charts.push(chart);
        }
        let initialValue = 8;   //无风险
        if (data.wind_warning === "低风险") {
            initialValue = 30;
        } else if (data.wind_warning === "中风险") {
            initialValue = 70;
        } else if (data.wind_warning === "高风险") {
            initialValue = 90;
        }
        const options = {
            title: {
                text: '大风风险等级',
                left: 'center',
                top: "5rem",
                textStyle: {
                    color: '#00bcd4',
                    fontWeight: 'bold',
                    fontSize: '.7rem'
                },
                subtextStyle: {
                    color: '#b0e0e6',
                }
            },
            tooltip: {
                backgroundColor: '#212121',
                borderColor: '#00bcd4',
                borderWidth: '0.1rem',
                textStyle: {
                    color: '#fff'
                },
                formatter: function (params) {
                    return "大风风险等级：" + data.wind_warning
                }
            },
            series: [
                {
                    name: '大风风险',
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    splitNumber: 3, // 分为三个区域：低、中、高风险
                    radius: '90%',
                    center: ['50%', '70%'],
                    axisLine: {
                        lineStyle: {
                            width: 15,
                            color: [
                                [0.20, '#00bcd4'],  // 无风险 (0-20)
                                [0.50, '#5cb85c'],  // 低风险 (20-50)
                                [0.80, '#f0ad4e'],  // 中风险 (50-80)
                                [1, '#d9534f']     // 高风险 (80-100)
                            ]
                        }
                    },
                    pointer: {
                        length: '80%',
                        width: 8,
                        color: 'auto'
                    },
                    axisTick: {
                        length: 15,
                        lineStyle: {
                            color: 'auto',
                            width: 2
                        }
                    },
                    splitLine: {
                        length: 25,
                        lineStyle: {
                            color: 'auto',
                            width: 4
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 16,
                        distance: -40,
                        formatter: function (value) {
                            if (value <= 20) return '无风险';
                            // if (value <= 50) return '低风险';
                            // if (value <= 80) return '中风险';
                            if (value <= 50) return '';
                            if (value <= 80) return '';
                            return '高风险';
                        }
                    },
                    title: {
                        offsetCenter: [0, '-40%'],
                        fontSize: 24,
                        color: '#fff',
                        text: '大风风险等级'
                    },
                    detail: {
                        fontSize: 30,
                        offsetCenter: [0, '0%'],
                        valueAnimation: true,
                        formatter: function (value) {
                            if (value <= 20) return '无';
                            if (value <= 50) return '低';
                            if (value <= 80) return '中';
                            return '高';
                        },
                        color: 'inherit'
                    },
                    data: [
                        {
                            value: initialValue,  // 根据火灾风险设置初始值
                            // name: '大风风险等级'
                        }
                    ]
                }
            ],
            // 添加图形组件，用于显示全局天气信息
            graphic: [
                {
                    type: 'text',
                    left: 'center',
                    top: 'bottom',
                    style: {
                        text: `决策建议: ${data.wind_warning_decision}`,
                        fontSize: 14,
                        fontWeight: 'bold',
                        fill: 'white', // 文字颜色
                        textAlign: 'center',
                        lineHeight: 20, // 行高
                        padding: [5, 0],
                    }
                }
            ]
        };

        chart.setOption(options);
    }

    function renderMapChart(mapData, weatherData) {
        const chart = echarts.init(document.getElementById('map_chart'));
        if (!charts.includes(chart)) {
            charts.push(chart);
        }
        // 注册地图(数据放在axios返回对象的data中哦)
        echarts.registerMap('AnQing', mapData);
        const options = {
            geo3D: {
                map: "AnQing", //注册地图的名字
                roam: true, //开启鼠标缩放和平移漫游。默认不开启
                itemStyle: {
                    color: "#4189f2", // 背景
                    opacity: 1, //透明度
                    borderWidth: 1, // 边框宽度
                    borderColor: "#eee", // 边框颜色
                    fontSize: 2, //
                },
                viewControl: {
                    distance: 150,
                    alpha: 90, // 上下旋转的角度
                    beta: 0, // 左右旋转的角度
                },
                label: {
                    show: true,
                    color: "lightgrey", //地图初始化区域字体颜色
                    fontSize: 10,
                    formatter: function (params) {
                        return params.name
                    },
                },
            },
            grid3D: {
                show: false,
            },
            xAxis3D: {
                type: 'value', // X 轴的类型，可以根据需要设置
                // 其他 xAxis3D 的配置项...
            },
            zAxis3D: {
                type: 'value', // X 轴的类型，可以根据需要设置
                // 其他 xAxis3D 的配置项...
            },
            yAxis3D: {
                type: 'value', // X 轴的类型，可以根据需要设置
                // 其他 xAxis3D 的配置项...
            },
            series: {
                type: 'bar3D',
                name: 'AnQing',
                coordinateSystem: 'geo3D',//这个属性是配合bar的数据的，barData用的是经纬度
                // 倒角尺寸
                // bevelSize: .5,
                // bevelSmoothness: 20,
                // data: [1, 2, 3, 4],
                color: '#EC691A',
                minHeight: 5,
                barSize: 15,
                animation: true,
                animationDurationUpdate: 2000
            },
            // 添加图形组件，用于显示全局天气信息
            graphic: [
                {
                    type: 'text',
                    left: 'right',
                    top: 'bottom',
                    style: {
                        text: `温度: ${weatherData.temp}°C\n湿度: ${weatherData.humidity}%\n风向: ${weatherData.direction}\n风力: ${weatherData.wind_scale}\n空气质量: ${weatherData.quality}`,
                        fontSize: 14,
                        fontWeight: 'bold',
                        fill: 'white', // 文字颜色
                        textAlign: 'center',
                        // width: 200, // 文本框宽度
                        // height: 100, // 文本框高度
                        lineHeight: 20, // 行高
                        backgroundColor: 'rgba(0,0,0,0.3)', // 背景颜色
                        padding: [10, 20], // 内边距
                        borderRadius: 10 // 圆角
                    }
                }
            ]
        };

        chart.setOption(options);
    }

    // 获取数据并更新图表
    function fetchData() {
        fetch('/hour_data')
            .then(response => response.json())
            .then(data => {
                renderTemperatureChart(data);
                renderHumidityChart(data);
                renderWindLevelChart(data);
                renderPrecipitationChart(data);
            });
        fetch('/days_data')
            .then(response => response.json())
            .then(data => {
                renderDaysTemperatureChart(data);
                renderDaysWeatherChart(data);
                renderDaysWindLevelChart(data);
            });
        fetch('/real_time_data')
            .then(response => response.json())
            .then(data => {
                renderRealTimeChart(data);
                renderRealTimeInfoChart(data);
                renderFireWarningChart(data);
                renderFloodWarningChart(data);
                renderColdWarningChart(data);
                renderWindWarningChart(data);
            });
    }

    // 初始化时获取数据
    fetchData();

    // 每5分钟刷新数据
    setInterval(fetchData, 30 * 60 * 1000);  // 每5分钟刷新一次

    // 初始化时添加 resize 事件监听器
    addResizeListener();

</script>
</html>
